
import React from 'react'
import './dist/layout.css'
import { Layout, Menu, Avatar, Dropdown,  } from 'antd'
import {
  UserOutlined
} from '@ant-design/icons'
import { permissionRoutes } from '../routes'
// import PropTypes from "prop-types"
import { withRouter } from 'react-router-dom'
import logo from '../assert/images/u146.png'
const { Header, Content, Footer, Sider } = Layout
const { SubMenu } = Menu



@withRouter // 高阶组件的使用 注解方法 等同于 withRouter(FrameLayOut) 但是需要配置插件
// @babel/plugin-proposal-decorators
class FrameLayOut extends React.Component {
  state = {
    collapsed: true,
    headers: ''
  }
  // 构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props

  // 验证props属性的类型
  // static propTypes = {
  //   headers: PropTypes.string.isRequired
  // }
  
  // 设置当前标签的默认值
  static defaultProps = {
    headers: (<div>妈的没找到</div>)
  }

  // 渲染菜单
  _renderSiderMenu = () => {
    // 判断路由 如果没有孩子节点就 使用 menu.item 如果有孩子节点就使用submenu
    function  _render(routes) {
      return routes.map(route => {
        if(route.children && route.children.length > 0) {
          return (
            <SubMenu key={route.path} icon={<route.meta.icon/>} title={route.meta.title}>
              {
                _render(route.children)
              }
            </SubMenu>
          )
        }
        return (
          <Menu.Item name={route.meta.title} key={route.path} icon={route.meta.icon ? <route.meta.icon/>: null}>
            {/* <Link to={route.path}>{ route.meta.title }</Link> */}
            { route.meta.title }
          </Menu.Item>
        )
      })
    }

    return (
      <Menu theme="dark" mode="inline" onClick={this.handleRoute}>
        {
          _render(permissionRoutes)
        }
      </Menu>
    )
  }
  // 跳转事件
  handleRoute = (e) => {
    // console.log(this.props) // 查看 this.props 里面有没有 hissory 的属性 
    // 没有就要用上 withRouter 高阶组件 它会自动合并一个hissory属性到this.props
    this.props.history.push(e.key) // 高阶组件牛逼 实现了编程式导航
    this.setState({
      header: e.key 
    })
  }
  // 收起菜单
  onCollapse = collapsed => {
    this.setState({ collapsed })
  }
  // 渲染头部
  _renderHeader = routes => {
    // 每当路由变化
    const e = window.location.href.split('3000')[1]
    // console.log(e) // 拿到得当前路由对象
    let copy = []
    routes.map(item => {
      if(item.children && item.children.length > 0){
        copy.push(item.children.flat(Infinity))
      }
      copy.push(item)
      return copy
    })
    // console.log(copy.flat(Infinity)) // 拿到得所有路由数组 
    return copy.flat(Infinity).map(item => {
      if(item.path === e){
        return (
          <div key={item.meta.id}>{ item.meta.title }</div>
        )
      }
      return null
    })
  }
  // 渲染头像下拉菜单
  menu = () => (
    <Menu>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="/">
          账号资料
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="/">
          修改密码
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="/">
          在线客服
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="/">
          系统通知
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" href="/">
          退出系统
        </a>
      </Menu.Item>
    </Menu>
  )
  render() {
    const { collapsed } = this.state
    return (
      <Layout style={{ minHeight: '100vh' }}>
        {/* 侧边栏 */}
        <Sider 
          collapsible={false} // 是否可以收起
          collapsed={collapsed} // 当前的收起状态
          onCollapse={this.onCollapse} // 收起方法
        >
          <div className="logo" style={{background:'#002140'}}>
            {
              this.state.collapsed ? (<div style={{width:'30px', height:'30px' ,borderRadius:'50%',marginLeft:'10px', background:'#f6f6fd'}}><img src={logo} style={{marginLeft:'-6px'}} alt=""/></div>) :
              (<div>
                <img src={logo} alt=""/>
                <span style={{color:'#d5d8dc', fontSize:'18px'}}>🐉诊所系统</span>
              </div>)
            }
          </div>
          {
            this._renderSiderMenu()
          }
        </Sider>
          
        {/* 右边 */}
        <Layout className="site-layout">

          <Header className="site-layout-background" style={{ padding: 0,height: '60px',width:'100%', display:'flex', justifyContent:'space-between' }}>
            {/* 拿到当前路由的名字进行渲染， 默认为 经营概况 */}
            <div style={{marginLeft:'50px', fontSize:'24px', fontWeight:'600'}}>
              {
                this._renderHeader(permissionRoutes)
              }
            </div>
            <div style={{marginRight:'60px'}}>
            <Dropdown overlay={this.menu} placement="bottomCenter">
              <Avatar style={{marginTop:'-10px'}} size="large" icon={<UserOutlined />}></Avatar> 
            </Dropdown>
              <span style={{fontSize:'20px', fontWeight:'600', marginLeft:'20px'}}>Dragon</span>
            </div>
          </Header>

          <Content style={{ margin: '0 16px', marginTop: '20px' }}>
            {
              this.props.children
            }
          </Content>

          {/* 底部 */}
          <Footer style={{ textAlign: 'center' }}>made by dragon xiao!!!!!!!!!!</Footer>
        </Layout>
      </Layout>
    )
  }
  
}

// 引入 history loaction match 装饰者设计模式
// babel/plugin-proposal-decorator 插件
export default FrameLayOut